<template>
  <div class="container">
    <div class="screen" ref="screen"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  const screen = ref()
  onMounted(() => {
    const screenElement = screen.value
    if (screenElement) {
      screenElement.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    }
  })
  // 定义大屏缩放比例
  const getScale = (w = 1920, h = 1080) => {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return Math.min(ww, wh)
  }
  // 监听窗口变化
  window.onresize = () => {
    screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    background-size: cover;
    .screen {
      position: fixed;
      width: 1920px;
      height: 1080px;
      left: 50%;
      top: 50%;
      transform-origin: left top;
    }
  }
</style>
